<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>GIS应急指挥系统</title>
  <link rel='stylesheet' href='js/bs/css/bootstrap.css'>
  <link rel="stylesheet" href="css/index.css">
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script src='js/bs/js/bootstrap.js'></script>
  <script src="dist/leaflet/include-leaflet.js"></script>
</head>
<style>
  font-family:微软雅黑 * {
    margin: 0;
    padding: 0
  }

  #anniu button {
    width: 100px;
    height: 40px;
  }

  #maindiv {
    width: 100%;
    height: 78%;
    background: #f8f8f8;
    margin: 0;
    padding: 0;
    min-width: 1770px;
  }

  .panel{
    border: none;
  }
</style>

<body>
  <!-- 顶部的标题 -->
  <div class="top-title">

  </div>
  <!-- 顶部的标题 -->

  <!-- 左侧的按钮组 -->
  <aside class="box" id="test">
    <div style="width: 100%;height: 100%;background: #f8f8f8;position: absolute;box-shadow: 2px 0px 22px 3px rgba(115,115,115,0.2)">
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <!-- 医院查询 -->
        <div class="panel panel-default" id="panel-hospital-query">
          <div style="width: 10px;height: 50px;background: #8BA96E;float: left;display: block;" id="ldcxdiv"></div>
          <div class="panel-heading" role="tab" id="headingOne">
            <div class="panel-title" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" style="height: 30px;" id="ldcxclick">
              <img src="img/Hospital.png" style="margin-left: 20px;float: left;width:30px;height:30px">
              <a class="collapsed" style="margin-left: 20px;font-size:17px;font-weight:bold;color: #666666;margin-top: 20px;text-decoration:none;line-height: 30px;text-align: center;">医院查询</a></div>
          </div>
          <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body" id="querydiv">
              <div class="input-group" style="margin-bottom: 5px; margin-top: 5px;">
                <div class="col-lg-6 col-lg-offset-3">
                  <div class="btn-group btn-group-justified" role="group" aria-label="...">
                    <div class="btn-group" role="group">
                      <button type="button" class="btn btn-default" id="hospital-query">
                        <span style="cursor: pointer;color: #333;font-weight: bold;">查询</span>
                      </button>
                    </div>
                    <div class="btn-group" role="group">
                      <button type="button" class="btn btn-default" id="hospital-clean">
                        <span style="cursor: pointer;color: #333;font-weight: bold;">清除</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 医院查询 -->

        <!-- 毒气扩散区分析 -->
        <div class="panel panel-default" id="panel-dangerous-area">
          <div style="width: 10px;height: 50px;background: #8BA96E;float: left;display: block;" id="lddjdiv"></div>
          <div class="panel-heading" role="tab" id="headingThree">
            <div class="panel-title" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour" style="height: 30px;" id="lddjclick">
              <img src="img/duqi.png" style="margin-left: 20px;float: left;width:30px;height:30px">
              <a class="collapsed" style="margin-left: 20px;font-weight:bold;font-size:17px;color: #666666;margin-top: 20px;text-decoration:none;line-height: 30px;text-align: center;">毒气扩散区分析</a></div>
          </div>
          <div id="collapseFour" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body" name="radioGroup" style="padding: 0;margin:0;">
              <div class="subpanel-dangerous-area">
                <label class="label-dangerous-area">致死区域
                  <input type="radio" name="radio" id="radio-die">
                  <span class="checkmark"></span>
                </label>
              </div>
              <div class="subpanel-dangerous-area">
                <label class="label-dangerous-area">重伤区域
                  <input type="radio" name="radio" id="radio-severe">
                  <span class="checkmark"></span>
                </label>
              </div>
              <div class="subpanel-dangerous-area">
                <label class="label-dangerous-area">轻伤区域
                  <input type="radio" name="radio" id="radio-minor">
                  <span class="checkmark"></span>
                </label>
              </div>
              <div class="subpanel-dangerous-area">
                <label class="label-dangerous-area">吸入反应区域
                  <input type="radio" name="radio" id="radio-inhalation">
                  <span class="checkmark"></span>
                </label>
              </div>
              <div class="subpanel-dangerous-area">
                <label class="label-dangerous-area" id="label-dangerous-area-cancel">取消
                  <input type="radio" name="radio" checked="checked" id="radio-cancel">
                  <span class="checkmark"></span>
                </label>
              </div>
            </div>
          </div>
        </div>
        <!-- 毒气扩散区分析 -->

        <!-- 最短救援路线 -->
        <div class="panel panel-default" id="panel-route-query">
          <div style="width: 10px;height: 50px;background: #8BA96E;float: left;display: block;" id="xyljdiv"></div>
          <div class="panel-heading" role="tab" id="headingThreethree">
            <div class="panel-title" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFourthree" aria-expanded="false" aria-controls="collapseFourthree" style="height: 30px;" id="xyljclick">
              <img src="img/path.png" style="margin-left: 20px;float: left;width:30px;height:30px">
              <a class="collapsed" style="margin-left: 20px;font-weight:bold;font-size:17px;color: #666666;margin-top: 20px;text-decoration:none; line-height: 30px;text-align: center;">最短救援路线</a></div>
          </div>
          <div id="collapseFourthree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreethree">
            <div class="panel-body">
              <div style="width: 100%; height: 140px; position: relative;">
                <span class="glyphicon glyphicon-sort" style="position: relative;margin-top: 30px;margin-left:10px;font-size: 20px;"></span>
                <div style="position: relative; width: 75%; float: right;margin-right: 18px;">
                  <div class="row">
                    <div class="col-lg-12">
                      <div class="input-group">
                        <span class="input-group-addon">
                          <span class="glyphicon glyphicon-map-marker" style="color: green"></span>
                        </span>
                        <div class="dropdown">
                          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" id="hospital-select-control">
                            请选择一家医院
                          </button>
                          <ul class="dropdown-menu" aria-labelledby="hospital-select-control" id="list-hospital">
                            <!-- 通过js,动态添加医院列表 -->
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                  <br>
                  <div class="progress-line"></div>
                  <div class="row">
                    <div class="col-lg-12">
                      <div class="input-group">
                        <span class="input-group-addon">
                          <span class="glyphicon glyphicon-map-marker" style="color: red"></span>
                        </span>
                        <div class="dropdown">
                          <input readonly type="text" class="form-control dropdown-toggle" id="dropdownMenu2" value="化工厂" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="text-align: center;">
                        </div>
                      </div>
                    </div>
                  </div>
                  <br>
                  <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                      <div class="btn-group btn-group-justified" role="group" aria-label="...">
                        <div class="btn-group" role="group">
                          <button type="button" id="result-clean" class="btn btn-default" style="font-weight: bold;" data-toggle="tooltip" data-placement="top" title="清除结果">
                            <span class="glyphicon glyphicon-erase" style="font-size: 22px;"></span>
                          </button>
                        </div>
                        <div class="btn-group" role="group">
                          <button type="button" id="retrive-route" class="btn btn-default" style="font-weight: bold;" data-toggle="tooltip" data-placement="top" title="获取路线">
                            <span class="glyphicon glyphicon-send" style="font-size: 22px;"></span>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 最短救援路线 -->
      </div>
    </div>
    <div class="button-left-control-pane">
      <button class="button-left-control"></button>
    </div>
  </aside>
  <!-- 左侧的按钮组 -->

  <!-- 核心 -->
  <div class="core-div">
    <!-- 右侧的按钮组 -->
    <div style="width: 100px; height: 100%; position: absolute; right: 0;  float: right; z-index: 200000; margin-right: 3px;">
      <div class="btn-group-vertical" role="group" id="anniu" style="position: sticky;top: 10%; right: 0px; box-shadow:2px 3px 5px 0px rgba(51,51,51,0.18);border-radius:5px;width: 45px;margin-left: 55px;">
        <button type="button" class="btn btn-default" id="button-fullWidth" style="background-image:url('img/全图.png') ;background-repeat: no-repeat; background-position:center;border-style: none;outline:none; margin-top: 0px;" data-toggle="tooltip"
          data-placement="left" title="全幅显示"></button>
        <button type="button" class="btn btn-default" id="button-zoomIn" style="background-image:url('img/放大.png') ;background-repeat: no-repeat; background-position:center;border-style: none;outline:none; margin-top: 0px;" data-toggle="tooltip"
          data-placement="left" title="放大"></button>
        <button type="button" class="btn btn-default" id="button-zoomOut" style="background-image:url('img/缩小.png') ;background-repeat: no-repeat; background-position:center;border-style: none;outline:none; margin-top: 0px;" data-toggle="tooltip" 
        data-placement="left" title="缩小"></button>
        <button type="button" class="btn btn-default" id="button-pan" style="background-image:url('img/平移.png') ;background-repeat: no-repeat; background-position:center;border-style: none;outline:none; margin-top: 0px;" data-toggle="tooltip"
          data-placement="left" title="平移"></button>
      </div>
    </div>
    <!-- 右侧的按钮组 -->

    <!-- 地图面板 -->
    <div class="map-panel">
      <div id="map" style="position: relative; height: 100%; z-index: 0;">
  
      </div>
    </div>
    <!-- 地图面板 -->

    <!-- 底部 -->
      <footer>
        <span style="display: block;text-align: center;">Copyright &copy; 2012-2020 SuperMap</span>
      </footer>
    <!-- 底部 -->
  </div>
  <!-- 核心 -->
</body>
<script src="js/Facility_Query.js"></script>
<script src='js/demo/L.Polyline.SnakeAnim.js'></script>
<script src="js/demo/customDivIcon.js"></script>
<script src="js/demo/globalConf.js"></script>
<script src="js/demo/mapControl.js"></script>
<script src="js/demo/leftControl.js"></script>
<script src="js/demo/rightControl.js"></script>
</html>
